<template>
	<view class="detail-wrapper" :style="{paddingTop: paddingTop + 'px'}">
		<navBar title="订单详情" backgroundColor="#EE3B3B" fontColor="#fff" :customBack="true" @back="toIndex" />
		<view class="detail-bg" :style="{top: paddingTop + 'px'}"></view>
		<view class="detail-content">
			<view class="detail-status-wrapper">
				<view class="">
					<view class="status">
						<image v-if="detailInfo.orderState == 2" class="icon"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/guarantee/dfh.png">
						</image>
						<image v-if="detailInfo.orderState == 3" class="icon"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/guarantee/dsh.png">
						</image>
						<image v-if="detailInfo.orderState == 6" class="icon"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/guarantee/ywc.png">
						</image>
						<text class="status-name"
							v-if="detailInfo.orderState == -1||detailInfo.orderState == 2">待发货</text>
						<text class="status-name" v-if="detailInfo.orderState == 3">待收货</text>
						<text class="status-name" v-if="detailInfo.orderState == 6">已完成</text>
					</view>
				</view>
				<view class="kefu" @click="callPhone">
					<u-icon name="kefu-ermai" color="#fff" size="40"></u-icon>
				</view>

			</view>
			<view class="detail-tip">
				<view class="express-name">
					快递单号：{{ detailInfo.trackingNumber?detailInfo.trackingNumber:'暂无'}}
					<image class="img" @click="onCopy(detailInfo.trackingNumber)"
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/copy.png">
					</image>
				</view>
				<view class="adress-info">
					<view class="atv">
						<image src="../../static/currentImg.png" mode=""></image>
					</view>
					<view class="user-info">
						<view class="user-name">
							{{ detailInfo.userName }}{{ detailInfo.consigneePhone }}
						</view>
						<view class="adress-name">
							{{ detailInfo.consigneeProvince }}{{ detailInfo.consigneeCity }}{{ detailInfo.consigneeCounty }}{{ detailInfo.consigneeAddressDetail }}
						</view>
					</view>
				</view>
			</view>
			<view class="goods-info">
				<view class="store" @click="goStoreDetial(detailInfo.terminalInfo)">
					<view class="store-name">
						<text class="name">{{ detailInfo.supplierName }}</text>
					</view>
				</view>
				<view class="goods-list">
					<view class="goods-item" v-for="item in detailInfo.items">
						<view class="goods-img">
							<image class="img"
								:src="item.image?item.image:'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/goods_default_square.png'">
							</image>
						</view>
						<view class="goods-info">
							<view class="goods-name">{{ item.goodsName }}</view>
							<view class="goods-price">
								<view class="price"><text style="font-size: 12px;"></text>{{ item.payScore }}积分</view>
								<view class="num">×{{ item.quantity }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="goods-cell">
					<view class="cell-label">商品金额：</view>
					<view class="cell-value">{{ detailInfo.payScore }}积分</view>
				</view>
				<view class="goods-cell">
					<view class="cell-label">优惠券：</view>
					<view class="cell-value">-0积分</view>
				</view>
				<view class="goods-cell">
					<view class="cell-label"></view>
					<view class="cell-value">实付金额： <text class="sf">{{ detailInfo.originalScore }}积分</text></view>
				</view>
			</view>
			<view class="order-info">
				<view class="list">
					<view class="label-name">订单渠道：</view>
					<view class="content">卡友之家</view>
				</view>
				<view class="list">
					<view class="label-name">订单编号：</view>
					<view class="content" @click="onCopy(detailInfo.orderNo)">{{ detailInfo.orderNo }}
						<image class="img"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/copy.png">
						</image>
					</view>
				</view>
				<view class="list">
					<view class="label-name">下单时间：</view>
					<view class="content">{{ detailInfo.createdTime }}</view>
				</view>
				<view class="list">
					<view class="label-name">支付方式：</view>
					<view class="content">积分支付</view>

				</view>
				<view class="list" v-if="detailInfo.payTime">
					<view class="label-name">支付时间：</view>
					<view class="content">{{ detailInfo.payTime }}</view>
				</view>
			</view>
			<view class="oprate-btn">
				<u-button type="primary" text="确认收货" v-if="detailInfo.orderState == 3" @click="onSure"></u-button>
				<u-button type="primary" text="再次购买" v-if="detailInfo.orderState == 6"
					@click="goGoodsDetail(detailInfo.items[0].goodsId)"></u-button>
			</view>
		</view>
		<u-modal :show="show" @confirm="onConfirm" :showCancelButton="true" content="是否确认已收到商品？" @cancel="onCancel">
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex'
	import {
		baseUrl
	} from '@/common/config'
	import navBar from '@/components/navBar.vue'
	export default {
		components: {
			navBar,
		},
		data() {
			return {
				detailInfo: {},
				baseUrl: baseUrl,
				lastPayTime: '0分0秒',
				timer: '',
				paddingTop: '',
				show: false,
				currentOrder: '',
				orderId: '',
				flag: false
			}
		},
		computed: {
			...mapState('global', ['showInfo']),
		},
		methods: {
			...mapMutations('global', ['setShowInfo']),

			// 申请退款
			goApplyRefound() {
				uni.navigateTo({
					url: `/orderPack/applyActions/refound?orderId=${this.orderId}`
				})
			},
			async getDetailInfo(val) {
				this.orderId = val.data.id
				if (val.data.typeOrder) {
					this.flag = true
				}
				try {
					const res = await this.$request({
						method: 'get',
						url: `/order-center/car-owner-integral/orders/${this.orderId}`,
					})
					this.detailInfo = res.datas
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}

				uni.stopPullDownRefresh();
			},
			//再次购买进入商品详情页面
			goGoodsDetail(code) {
				uni.navigateTo({
					url: `/indexPack/integral/integralGoodsDetail?jfcode=${code}`
				});
			},
			//电话
			callPhone(item) {
				// 区分设备
				if (uni.getSystemInfoSync().osName === 'ios') {
					uni.makePhoneCall({
						phoneNumber: item.phone || '400-696-5399'
					})
				} else {
					uni.showModal({
						title: "拨打电话",
						content: item.phone || '400-696-5399',
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: item.phone || '400-696-5399'
								})
							}
						}
					})
				}
			},
			//复制
			onCopy(data) {
				uni.setClipboardData({
					data: data, // 复制的内容 
					success: function() {
						console.log('success');
						uni.showToast({
							title: '复制成功',
							duration: 1000
						})
					}
				});
			},
			//确认收货
			onSure() {
				this.show = true
			},
			async onConfirm() {
				uni.showLoading({
					title: '正在提交...'
				})
				try {
					const res = await this.$request({
						method: 'post',
						url: `/order-center/car-owner-integral/orders/${this.detailInfo.id}/confirm`
					})
					this.show = false
					this.getDetailInfo({
						data: {
							id: this.orderId
						}
					})
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
			},
			onCancel() {
				this.show = false
			},
			// 回到首页
			toIndex() {
				if (this.flag) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/index/index/index'
					})
				}

			},
		},
		onLoad() {
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			uni.showLoading({
				title: '加载中...'
			})
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('detailInfo', this.getDetailInfo)
		},
	}
</script>

<style lang="scss" scoped>
	.detail-wrapper {
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);

		.img {
			width: 100%;
			height: 100%;
		}

		.mr {
			margin-right: 20rpx;
		}

		.ml {
			margin-left: 20rpx;
		}

		.fe {
			justify-content: flex-end;
		}

		.hr {
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
		}

		.list {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			margin-bottom: 24rpx;
			font-size: 12px;

			.label-name {
				width: 150rpx;
				font-size: 12px;
				font-weight: 400;
				margin-right: 48rpx;
				color: rgba(0, 0, 0, 0.45)
			}

			.content {
				flex: 1;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
				display: flex;
				align-items: center;
			}
		}

		.between {
			justify-content: space-between;
		}


		.detail-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 350rpx;
			background: #EE3B3B;
			z-index: 0;
		}

		.detail-content {
			position: relative;
			z-index: 1;
			width: calc(100% - 40rpx);
			margin-left: 20rpx;

			.detail-status-wrapper {
				height: 250rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.kefu {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
				}

				.status {
					display: flex;
					justify-content: center;
					align-items: center;

					.icon {
						width: 62rpx;
						height: 62rpx;
						margin-right: 20rpx;
					}

					.status-name {
						color: #fff;
						font-size: 22px;
						font-weight: 400;
					}
				}

				.warning {
					color: #fff;
					font-size: 16px;
					margin-top: 40rpx;
				}
			}

			.detail-tip {
				padding: 36rpx 32rpx;
				background: #fff;
				border-radius: 12rpx;

				.express-name {
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
					padding-bottom: 28rpx;
					display: flex;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.adress-info {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border-top: 1px solid #eee;
					padding-top: 28rpx;

					.atv {
						width: 124rpx;
						height: 124rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.user-info {
						width: calc(100% - 156rpx);
						padding-left: 32rpx;

						.user-name {
							font-size: 15px;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							margin-bottom: 30rpx;
						}

						.adress-name {
							color: rgba(0, 0, 0, 0.65);
							word-wrap: break-all;
							overflow: hidden;
							line-break: anywhere;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}
				}
			}

			.goods-info {
				background: #fff;
				border-radius: 12rpx;
				margin-top: 20rpx;

				// .				<view class="goods-cell">
				// 	 <view class="cell-label">商品金额：</view>
				// 	 <view class="cell-value"></view>
				// </view>
				.goods-cell {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 32rpx;
					padding-bottom: 20rpx;
					font-size: 14px;

					.cell-label {
						font-weight: 400;
						color: rgba(0, 0, 0, 0.45)
					}

					.cell-value {
						font-weight: 400;
						color: rgba(0, 0, 0, 0.85);
					}

					.sf {
						font-size: 18px;
						font-weight: bold;
						color: #EE3B3B;
					}
				}

				.store {
					padding: 32rpx;
					font-size: 14px;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

					.store-name {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.name {
							max-width: calc(100% - 20rpx);
							word-wrap: break-all;
							overflow: hidden;
							line-break: anywhere;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}
				}

				.goods-list {
					padding: 16rpx 32rpx;

					.goods-item {
						display: flex;
						margin-bottom: 20rpx;

						.goods-img {
							width: 160rpx;
							height: 160rpx;
						}

						.goods-info {
							flex: 1;
							margin-left: 20rpx;
							width: calc(100% - 180rpx);

							.goods-name {
								font-size: 15px;
								font-weight: 500;
								color: rgba(0, 0, 0, 0.85);
								line-break: anywhere;
								word-wrap: break-all;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.goods-price {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-top: 24rpx;
								margin-bottom: 20rpx;

								.price {
									font-size: 17px;
									font-weight: 400;
									color: #EE3B3B;
								}

								.num {
									font-size: 14px;
									font-weight: 500;
									color: rgba(0, 0, 0, 0.85)
								}
							}

							.action-btn {
								height: auto;
								overflow: hidden;
								padding-bottom: 20rpx;

								/deep/ .u-button {
									width: auto;
									margin-left: 20rpx;
									float: right;
								}
							}
						}
					}
				}
			}

			.order-info {
				background: #fff;
				border-radius: 12rpx;
				margin-top: 20rpx;
				padding: 32rpx;
				padding-bottom: 10rpx;

				/deep/ .u-button {
					width: 200rpx;
				}

				.img {
					width: 36rpx;
					height: 36rpx;
				}

				.acount {
					font-size: 18px;
					font-weight: 500;
					color: #EE3B3B;
				}

			}

			.oprate-btn {
				margin-top: 20rpx;
				padding: 32rpx;
				background: #fff;
				display: flex;
				justify-content: center;

				/deep/ .u-button {
					width: 100%;
					margin: 0 20rpx;
				}
			}
		}
	}
</style>
